<template>
	<div>
		<hot-table :settings="hotSettings" :language="language" licenseKey="non-commercial-and-evaluation"></hot-table>
	</div>
</template>

<script>
	import 'handsontable/languages/zh-CN';
	import {
		HotTable
	} from '@handsontable/vue';
	import Handsontable from 'handsontable';

	export default {
		name: 'HelloWorld',
		data() {
			return {
				hotSettings: {
					data: Handsontable.helper.createSpreadsheetData(1000, 10),
					colWidths: 100,
					width: '100%',
					height: 320, //整个表格的高度
					rowHeights: 23, //单行高
					colHeaders: ['A', 'AA', 'AAAAAAA'], //为true自动生成表头，或者自定义数组字符串 ['A','AA','AAA']
					colWidths: 100, //不同列自定义不同宽度 [null, null, null, null, null],不写默认100好像
					rowHeaders: true,
					// dropdownMenu: true,  //表头一个下拉选项，最好使用 contextMenu: true
					contextMenu: true, //右键选项
					stretchH: 'last', //哪一列占剩余的宽,可以是 'all'，全部拉伸
					manualColumnMove: true, //是否可以拖拽，配合manualRowMove使用
					manualRowMove: true, //是否可以拖拽，配合manualColumnMove使用
					headerTooltips: {
						rows: true,
						columns: true,
						onlyTrimmed: true
					}, //表头太长时有个tooltip
					// manualColumnFreeze: true,  //右键鼠标事件中有 '固定'选项，最好不用，固定后会到第一排
					columnSorting: true, //排序
				},
				language: 'zh-CN',
			}
		},
		components: {
			HotTable
		}

	}
</script>
